<!DOCTYPE html>
<html hc="a0"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Decode and Encode Base64 (using JavaScript)</title>
<link rel="stylesheet" type="text/css" href="./files/basic.css" media="screen">
<link href="./files/jquery-ui.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><style type="text/css"></style>
<script type="text/javascript" src="http://toolsnogisacoom.googlecode.com/svn/js/jquery-ui.min.js"></script>

<script type="text/javascript" language="javascript">
function minimize() {
    $(".header").fadeOut();
    $(".description").fadeOut();
    $(".footer").fadeOut();
}

$(document).ready(function() {
    $("#minimize").bind("click",minimize);
});
</script>

<script type="text/javascript" language="javascript">
<!-- 
var b64array = "ABCDEFGHIJKLMNOP" +
           "QRSTUVWXYZabcdef" +
           "ghijklmnopqrstuv" +
           "wxyz0123456789+/" +
           "=";

function encodePlain() {
    input = $("#plain").val();
    var base64 = "";
    var hex = "";
    var chr1, chr2, chr3 = "";
    var enc1, enc2, enc3, enc4 = "";
    var i = 0;

    do {
        chr1 = input.charCodeAt(i++);
        chr2 = input.charCodeAt(i++);
        chr3 = input.charCodeAt(i++);
    
        enc1 = chr1 >> 2;
        enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
        enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
        enc4 = chr3 & 63;
    
        if (isNaN(chr2)) {
            enc3 = enc4 = 64;
        } else if (isNaN(chr3)) {
            enc4 = 64;
        }

        base64  = base64  +
            b64array.charAt(enc1) +
            b64array.charAt(enc2) +
            b64array.charAt(enc3) +
            b64array.charAt(enc4);
        chr1 = chr2 = chr3 = "";
        enc1 = enc2 = enc3 = enc4 = "";
    } while (i < input.length);

    $("#base64").val(base64 );

    encodeHex();
    encodeImage();
}

function decode64() {
    var input = $("#base64").val();
    var output = "";
    var hex = "";
    var chr1, chr2, chr3 = "";
    var enc1, enc2, enc3, enc4 = "";
    var i = 0;

    var base64test = /[^A-Za-z0-9\+\/\=]/g;
    if (base64test.exec(input)) {
        $("#message").html("There were invalid base64 characters in the input text.\n" +
              "Valid base64 characters are A-Z, a-z, 0-9, '+', '/',and '='\n" +
              "Expect errors in decoding.");
    } else {
        $("#message").html("");
    }
    input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");

    do {
        enc1 = b64array.indexOf(input.charAt(i++));
        enc2 = b64array.indexOf(input.charAt(i++));
        enc3 = b64array.indexOf(input.charAt(i++));
        enc4 = b64array.indexOf(input.charAt(i++));
        
        chr1 = (enc1 << 2) | (enc2 >> 4);
        chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
        chr3 = ((enc3 & 3) << 6) | enc4;
        
        output = output + String.fromCharCode(chr1);
        
        if (enc3 != 64) {
            output = output + String.fromCharCode(chr2);
        }
        if (enc4 != 64) {
            output = output + String.fromCharCode(chr3);
        }
    
        chr1 = chr2 = chr3 = "";
        enc1 = enc2 = enc3 = enc4 = "";
    
    } while (i < input.length);

    $("#plain").val(unescape(output));
    encodeHex();
    encodeImage();
}

function encodeHex() {
    var hex="";
    var input = $("#plain").val();
    for (i=0; i<input.length; i++)
        hex += '%' + input.charCodeAt(i).toString(16);

    $("#hex").val(hex);
}

function encodeImage() {
    var src = "data:image;base64,";
    src = src + $("#base64").val();
    $("#b64_img").attr("src",src);
}

function showImage() {
    $("#as_image").dialog();
}

$(document).ready(function() {
    $("#plain").bind("keyup",encodePlain);
    $("#base64").bind("keyup",decode64);
    $("#as_image_link").bind("click",showImage);
});
//-->
</script>

<script type="text/javascript" async="" src="./files/embed.jrs"></script></head>
<body>
<div class="wrap">
<div class="content">
<div class="header">
<h1 id="title">Decode and Encode Base64 (using JavaScript)</h1>
<div class="ads">

</div>
</div>
<div class="body">
<div id="message"></div>
<div style="text-align:center;">
<p>
Base64 (automatically decoded)<br>
<textarea id="base64" rows="3" style="width: 748px; margin: 2px 0px; height: 193px;"></textarea>

</p><p>
ASCII Plain Text (automatically encoded)<br>
<textarea id="plain" rows="3" style="width: 714px; margin: 2px 0px; height: 159px;"></textarea>

</p><p>
Hex<br>
<textarea id="hex" rows="3" style="width: 748px; margin: 2px 0px; height: 230px;" readonly="readonly"></textarea>

</p><p>
Options<br>
<a id="as_image_link" href="#">Decode as Image</a>
</p></div>

<script charset="utf-8" type="text/javascript" src="./files/get_num_replies.j5s"></script>

</div>

<p>This is a simple online base 64 encoder and decoder. This page was designed to be helpful to developers and anyone doing programming work. Base64 is a common format used for the web and email. It allows binary data to be transmitted in plain text format without risk of the data being clobbered by an intermediate server that does not handle certain binary characters. The number system has a base of 64, which means that each character requires 6 bits of storage.
</p><p>This page should be useful to anyone who occasionally comes across a base64 string that they want to decode. This includes things like HTTP basic authentication passwords. This app is helpful to PHP, Ruby on Rails, and other developers. It is also helpful for new programmers who are trying to understand base64 encoding.

Please let me know below if you have any ideas on how I can improve the functionality or usability of this page.

</p>

</div>
</div>


<div class="ui-dialog ui-widget ui-widget-content ui-corner-all  ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-as_image" style="display: none; z-index: 1002; outline: 0px; position: absolute; height: auto; width: 300px; top: 860px; left: 350px;"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" unselectable="on"><span class="ui-dialog-title" id="ui-dialog-title-as_image" unselectable="on">Decoded as Image (IE not supported)</span><a href="./files/Decode and Encode Base64 (using JavaScript).htm" class="ui-dialog-titlebar-close ui-corner-all" role="button" unselectable="on"><span class="ui-icon ui-icon-closethick" unselectable="on">close</span></a></div><div id="as_image" style="width: auto; min-height: 87px; height: auto;" class="ui-dialog-content ui-widget-content">
<img id="b64_img" src="data:image;base64,Ik1hbiBpcyBkaXN0aW5ndWlzaGVkLCBub3Qgb25seSBieSBoaXMgcmVhc29uLCBidXQgLi4uIg==">
</div><div class="ui-resizable-handle ui-resizable-n" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-e" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-s" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-w" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se" style="z-index: 1001;" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 1002;" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 1003;" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 1004;" unselectable="on"></div></div>

</body></html>